<template>
	<a-modal title="基础物料" :width="1500" :visible="visible" :maskClosable="false" :confirmLoading="confirmLoading"
		@ok="handleSubmit" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-form-item label="采购物料号" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input placeholder="请输入采购物料号" disabled v-decorator="['materialCode']" />
				</a-form-item>
				<a-form-item label="采购物名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback="">
					<a-input placeholder="请输入采购物名称" disabled v-decorator="['materialName']" />
				</a-form-item>
			</a-form>
			<div style="margin: 10px 0px;">
				<a-button type="primary" @click="showEmsMaterialIndex1">选择物料</a-button>
			</div>
			<div>
				<a-table ref="table" size="default" :columns="columns" :data-source="dataSource">
					<span slot="image" slot-scope="text,record">
						<image-preview1 :images="text" :imageUrl="record.imageUrl" />
					</span>
					<span slot="singleNumber" slot-scope="text,record">
						<a-input-number placeholder="请输入" style="width: 100%;" :min="0" v-model="record.singleNumber" />
					</span>
					<span slot="purchasePrice" slot-scope="text,record">
						<a-input-number placeholder="请输入" style="width: 100%;" :min="0" v-model="record.purchasePrice" />
					</span>
					<span slot="action" slot-scope="text,record,index">
						<a @click="handleRemove(index)">移除</a>
					</span>
				</a-table>
			</div>
		</a-spin>
		<ems-material-index ref="emsMaterialIndex" :on-row-selected="onEmsMaterialIndexSelected" />
	</a-modal>
</template>

<script>
import emsMaterialIndex from './emsMaterialIndex'
export default {
	components: {
		emsMaterialIndex
	},
	data() {
		return {
			labelCol: {
				xs: { span: 3 },
				sm: { span: 3 }
			},
			wrapperCol: {
				xs: { span: 20 },
				sm: { span: 20 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			dataSource: [],
			columns: [
				{
					title: '序号', width: '80px',
					dataIndex: 'index',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '类型',
					dataIndex: 'materialTypeName'
				},
				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '物料名称',
					dataIndex: 'materialName'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber'
				},
				{
					title: '图片',
					dataIndex: 'image',
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '实时库存',
					dataIndex: 'inventoryNumber'
				},
				{
					title: '采购价',
					width: '260px',
					dataIndex: 'purchasePrice',
					scopedSlots: { customRender: 'purchasePrice' }
				},
				{
					title: '单个所需数量',
					width: '260px',
					dataIndex: 'singleNumber',
					scopedSlots: { customRender: 'singleNumber' }
				},
				{
					title: '操作',
					width: '140px',
					fixed: 'right',
					scopedSlots: { customRender: 'action' }
				}
			],
			currentRecord: {},
		}
	},
	methods: {
		init(record, list = []) {
			this.currentRecord = record;
			console.log(record);
			setTimeout(() => {
				this.form.setFieldsValue({
					materialName: record.materialName,
					materialCode: record.materialCode
				})
			}, 300);
			this.dataSource = list || [];
			this.visible = true;
		},
		handleRemove(index) {
			console.log(index);
			this.dataSource.splice(index, 1);
		},
		onEmsMaterialIndexSelected(data) {
			console.log("data", data);
			this.dataSource.push(data);
		},
		showEmsMaterialIndex1() {
			let materialType = null;
			let materialTypeList = [];
			let typeList = [
				this.$businessEnum.MATERIAL_TYPE_ENUM.material,
				this.$businessEnum.MATERIAL_TYPE_ENUM.customized,
				this.$businessEnum.MATERIAL_TYPE_ENUM.cable,
				this.$businessEnum.MATERIAL_TYPE_ENUM.packing,
			]
			materialType = this.$businessEnum.MATERIAL_TYPE_ENUM.material.id;

			materialTypeList = typeList;
			let selectList = this.dataSource.map(val => val.materialId);
			this.$refs.emsMaterialIndex.show({
				materialType,
				materialTypeList
			}, selectList)
		},
		handleSubmit() {
			if (this.dataSource.length == 0) {
				this.$message.error('最少选择一种物料');
				return
			}
			let index = this.dataSource.filter(val => val.singleNumber == 0 || val.singleNumber == null);
			if (index.length > 0) {
				this.$message.error('物料数量不能为0');
				return
			}
			let index1 = this.dataSource.filter(val => val.purchasePrice == 0 || val.purchasePrice == null);
			if (index1.length > 0) {
				this.$message.error('采购价不能为0');
				return
			}
			this.$emit('selectlist', JSON.parse(JSON.stringify({
				[this.currentRecord.materialId]: this.dataSource
			})));
			this.visible = false;
		},
		handleCancel() {
			this.form.resetFields();
			this.visible = false
		}
	}
}
</script>
